<template>
  <div>
    <h2>投资列表</h2>
    投资名称<input type="text" v-model="state.Iname" /><input
      type="button"
      value="查询"
      @click="go1"
    />
    <table class="table" border="1">
      <tr>
        <td>项目ID</td>
        <td>投资项目名称</td>
        <td @click="sum">总额度</td>
        <td>已投金额</td>
        <td>剩余额度</td>
        <td>投资次数</td>
        <td>操作</td>
      </tr>
      <tr v-for="item in list">
        <td>{{ item.Iid }}</td>
        <td>{{ item.Iname }}</td>
        <td>{{ (item.I_Sum).fixed(2) }}</td>
        <td>{{ item.I_Ysum }}</td>
        <td>{{ item.I_Esum }}</td>
        <td>{{ item.Inumber }}</td>
        <td><slot :data="item.Iid"></slot>
          </td>
      </tr>
    </table>
    共有<span>{{ count }}</span
    >条数据, 每页显示<span>{{ state.pagesize }}</span
    >条数据, 当前<span>{{ state.pageindex }}</span
    >/<span>{{ pcount }}</span
    >页
    <input type="button" value="首页" @click="Jump('First')" />
    <input type="button" value="上一页" @click="Jump('on')" />
    <input type="text" size="1" v-model="state.pageindex" /><input
      type="button"
      value="go"
      @click="go2"
    />
    <input type="button" value="下一页" @click="Jump('next')" />
    <input type="button" value="尾页" @click="Jump('end')" />
    <select v-model="state.pagesize" @change="Size">
      <option v-for="item in arr" :value="item">每页{{ item }}条</option>
    </select>
  </div>
</template>

<script setup lang="ts">
import router from '@/router';
import axios from 'axios';
import { reactive, toRefs, onMounted,defineExpose } from 'vue';
let data = reactive({
  state: {
    Iname: '',
    pagesize: 2,
    pageindex: 1
  },
  list: {},
  count: '',
  pcount: '',
  arr: [2, 4, 6, 8]
});
let { list, state, count, pcount, arr } = toRefs(data);
onMounted(() => {
  getlist();
});
function go1() {
  getlist();
}
function Size() {
  getlist();
}
function getlist() {
  axios({
    url: 'http://localhost:57328/api/Invest/GetInvestList',
    method: 'get',
    params: state.value
  })
    .then((res) => {
      console.log(res);
      list.value = res.data.data;
      count.value = res.data.Count;
      pcount.value = res.data.Pcount;
    })
    .catch((err) => {
      console.log(err);
    });
}
function sum() {
  axios({
    url: 'http://localhost:57328/api/Invest/GetInvestListsum',
    method: 'get',
    params: state.value
  })
    .then((res) => {
      console.log(res);
      list.value = res.data.data;
    })
    .catch((err) => {
      console.log(err);
    });
}
function Jump(str: any) {
  switch (str) {
    case 'First':
      if (state.value.pageindex == 1) {
        alert('当前已经是首页');
        return;
      }
      state.value.pageindex = 1;
      break;
    case 'end':
      if (state.value.pageindex == pcount.value) {
        alert('当前已经是尾页');
        return;
      }
      state.value.pageindex = pcount.value;
      break;
    case 'on':
      if (state.value.pageindex == 1) {
        alert('当前已经是首页');
        return;
      }
      state.value.pageindex -= 1;
      break;
    case 'next':
      if (state.value.pageindex == pcount.value) {
        alert('当前已经是尾页');
        return;
      }
      state.value.pageindex += 1;
      break;
  }
  getlist();
}
function go2() {
  getlist();
}
function Del(id: any) {
  if (confirm('确定要删除吗？')) {
    axios({
      url: 'http://localhost:57328/api/Invest/GetInvestDel',
      method: 'get',
      params: {
        Iid: id
      }
    })
      .then((res) => {
        console.log(res);
        if (res.data.data > 0) {
          alert('删除成功');
          getlist();
        } else if (res.data.data == -1) {
          alert('投资人数大于0不能删除');
          return;
        }
      })
      .catch((err) => {
        console.log(err);
      });
  }
}
defineExpose({
  getlist
})
</script>

<style scoped></style>
